<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>list-style-type</title>
    <style>
      .list1 li {
        list-style-type: square; /* 方块 */
      }
      .list2 li {
        list-style-type: decimal; /* 数字 */
      }
      .list3 li {
        list-style-type: lower-latin; /* 小写字母 */
      }
      .list4 li {
        list-style-type: '🍎'; /* 自定义 */
      }
      .list5 li {
        list-style-type: space-counter; /* 空格 */
      }
      @counter-style space-counter {
        symbols: '🍌' '🍇' '🍉';
        prefix: '('; /* 前缀 */
        suffix: ')'; /* 后缀 */
      }
    </style>
  </head>
  <body>
    <ul class="list1">
      <li>home</li>
      <li>about</li>
      <li>contact</li>
    </ul>
    <ul class="list2">
      <li>home</li>
      <li>about</li>
      <li>contact</li>
    </ul>
    <ul class="list3">
      <li>home</li>
      <li>about</li>
      <li>contact</li>
    </ul>
    <ul class="list4">
      <li>home</li>
      <li>about</li>
      <li>contact</li>
    </ul>
    <ul class="list5">
      <li>home</li>
      <li>about</li>
      <li>contact</li>
    </ul>
  </body>
</html>
